<div class="card-body">
  <div class="promo-rule-option-values">
    <div class="js-promo-rule-option-values"></div>
    <button class="btn btn-primary btn-success js-add-promo-rule-option-value">
      <%= svg_icon name: "add.svg", width: '16', height: '16' %>
      <%= Spree.t(:add) %>
    </button>
  </div>
</div>

<%= content_tag :div, nil, class: "hidden js-original-promo-rule-option-values",
  data: { :'original-option-values' => promotion_rule.preferred_eligible_values } %>

<script type="text/x-handlebars-template" id="promo-rule-option-value-option-values-select-name-template">
  <%= param_prefix %>[preferred_eligible_values][{{productId}}]
</script>

<script type="text/x-handlebars-template" id="promo-rule-option-value-template">
  <div class="promo-rule-option-value panel card mb-3">
    <div class="card-header d-flex justify-content-between">
      <label><%= Spree.t(:product) %> <%= Spree.t(:option_values) %></label>
      <a class="js-remove-promo-rule-option-value delete pull-right">
        <%= svg_icon name: "delete.svg", width: '16', height: '16' %>
      </a>
    </div>
    <div class="card-body row p-3">
      <div class="col-12 col-md-6">
        <input class="js-promo-rule-option-value-product-select fullwidth" type="hidden" value="{{ productSelect.value }}">
      </div>
      <div class="col-12 col-md-6">
        <input class="js-promo-rule-option-value-option-values-select fullwidth" name="<%= param_prefix %>[preferred_eligible_values][{{ productSelect.value }}]" type="hidden" value={{optionValuesSelect.value}}>
      </div>
    </div>
  </div>
</script>
